<template>
  <!-- 3用户抗定位 -->
  <div>
    <div class="tc">
      <div class="bg">

        <div class="title">
          预警信息
        </div>
        <div class="body2">
          <div class="unit-info">
            <span>定位地点：</span>
            <span class="right-align">河南省郑州市管城回族区英协路5号</span>
          </div>
          <div class="unit-info">
            <span class="right-align">（33.6246， 12.3656）</span>
          </div>
          <div class="unit-info">
            <span>泄露地点：</span>
            <span class="right-align red-text">家庭地址</span>
          </div>
          <div class="unit-info">
            <span>定位依据：</span>
            <span class="right-align">用户发布社交内容</span>
          </div>

        </div>

        <div class="bt">
          <el-button class="bt1" @click="dialogFormVisible = true">
            抗定位
          </el-button>
          <el-button class="bt1" @click="toestimate">
            详情
          </el-button>
        </div>

      </div>
      <!-- 抗定位任务配置弹窗 -->
      <el-dialog class="maindialog" title="抗定位任务配置" :visible.sync="dialogFormVisible" width="800px" z-index="1000">
        <el-form :model="form">
          <el-descriptions title="用户信息">
            <el-descriptions-item label="用户名称">
              安小宇
            </el-descriptions-item>
            <el-descriptions-item label="用户ID">
              6143957967
            </el-descriptions-item>
            <el-descriptions-item label="社交平台">
              新浪微博
            </el-descriptions-item>
            <el-descriptions-item label="家庭地址">
              河南省郑州市管城回族区英协路5号附一栋
            </el-descriptions-item>
            <el-descriptions-item label="工作地址">
              河南省郑州市高新区科学大道100号
            </el-descriptions-item>
          </el-descriptions>
          <el-form-item label="抗定位方式：" :label-width="formLabelWidth">
            <el-checkbox label="社交内容混淆" />
            <el-checkbox label="社交关系混淆" />
          </el-form-item>
          <el-form-item label="设置混淆后位置：" :label-width="formLabelWidth">
            <el-input v-model="input" style="width: 190px" placeholder="请输入想要混淆到的地点" />
          </el-form-item>
        </el-form>

        <el-alert title="该操作会修改用户社交内容与社交关系，请谨慎操作！" type="warning" show-icon
          style="width: 250px; position: relative; left: 400px; top: -70px" />
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">
            取 消
          </el-button>
          <el-button type="primary" @click="showDetails">
            确 定
          </el-button>
        </div>
      </el-dialog>
    </div>
    <el-dialog class="maindialog2" :visible.sync="dialogDetails" width="30%" z-index="10000">
      <template #title>
        <div style="font-weight:bold;font-size:20px;color: #fff;text-align: center;">
          新建用户抗定位任务
        </div>
      </template>
      <span class="dialogDetailstext">新建用户抗定位任务完成，任务执行需要一段时间，完成后将在消息框进行提示。</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogDetails = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      dialogDetails: false,
      input: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "180px",
    };
  },
  methods: {
    showDetails() {
      this.dialogFormVisible = false;
      this.dialogDetails = true;
    },
    toestimate() {
      this.$router.push("/userestimate");
    },
  },
};
</script>

<style scoped>
.body2 {
  position: absolute;

  color: #90CEE9;
  font-size: 16px;
}

.tc {
  position: absolute;
  bottom: 50%;
  right: 25%;
  width: 350px;
  height: 200px;
  z-index: 10000;
}

.bg {
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/xd/dialogbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 10000;
}

.title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 20px;
  color: #ffffff;
  line-height: 19px;
  text-align: left;
  font-style: normal;
  text-align: center;
  padding: 20px;
  font-weight: bold;
}

.bt {
  position: absolute;
  top: 80%;
  left: 20%;

  .bt1 {
    font-size: 13px;
    width: 80px;
    height: 30px;
    background: linear-gradient(270deg, #2DB2FD 0%, #0E5FFF 100%);
    border-radius: 2px 2px 2px 2px;
    border: none;
    color: #fff;
    text-align: center;
  }
}

.dialog-footer {
  text-align: center;

  .el-button {
    font-size: 13px;
    width: 100px;
    background: linear-gradient(270deg, #2DB2FD 0%, #0E5FFF 100%);
    border-radius: 2px 2px 2px 2px;
    border: none;
    color: #fff;
    text-align: center;
  }
}
.dialogDetailstext {
  font-size: 18px;
  font-weight: bolder;
  color: #fff;
}
.maindialog {
  .el-dialog__body {
    .el-descriptions__body {
      font-size: 17px
    }

    .el-checkbox__label {
      font-size: 18px;
      color: #fff;
    }

    .el-form-item__label {
      position: absolute;
      /* left: 5px; */
      width: 0;
      text-align: left;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
    }
  }
}

.red-text {
  color: red;
}
</style>